<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meat name="viewpoet" content="with=device-width, initial-scale=1.0">
        <title>Document</title>
</head>

<body>
    <div id="app">
        姓：<input type="text" v-model="firstName"> +
        名：<input type="text" v-model="lastName"> =
        <span>{{fullName}}</span><br><br>
        <button @click="changeName">改名卡</button>
    </div>
    <!-- 引入的是开发版本包 - 包含完整的注释和警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                firstName: '刘',
                lastName: '备'
            },
            methods: {
                changeName() {
                    this.fullName = '吕小布'
                }
            },
            computed: {
                //简写：只能获取数据，不能修改数据
                // fullName() {
                //     return this.firstName + this.lastName
                // }
                //完整写法：获取 + 设置
                fullName: {
                    //当fullName计算属性，被获取求值时，执行get(有缓存)
                    //会将返回值作为，求值的结果
                    get() {
                        return this.firstName + this.lastName
                    },
                    //当fullName计算属性，被修改赋值时，执行set
                    //修改的值，传递给set方法的形参
                    set(value) {  //this.fullName='吕小布'  因此value是吕小布
                        //字符串截取
                        this.firstName = value.slice(0, 1)  //截取下标0-1的字符
                        this.lastName = value.slice(1)  //截取下标从1开始的字符，直到字符串末尾

                    }
                }
            }
        })
    </script>

</body>

</html>